<div>
	<div id="tb<?php echo $uniqid;?>" style="padding:5px" class="datagrid-toolbar">
		<table cellspacing="0" cellpadding="0">
			<tbody>
			<tr>
				<td><span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='included'?'selected':''"
						  @click="filter('included')"><span class="l-btn-text">已计入</span></span>
					<span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='returned'?'selected':''"
						  @click="filter('returned')"><span class="l-btn-text">已退回</span></span></td>
				<td><a href="javascript:void(0);" onclick="cfteamconsumeReload();" class="l-btn l-btn-small l-btn-plain"><span
						class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span class="l-btn-text">重载</span></span></a></td>
				<td><span style="line-height:30px;">日期</span>
					<input id="cfteamconsumeStartOn" style="width:110px" type="text"
						   class="easyui-datebox"> </input>至
					<input id="cfteamconsumeEndOn" style="width:110px" type="text"
						   class="easyui-datebox"> </input>
				</td>
				<td><select id="cfteamconsumeKeywordsType" class="forminput inputstyle textbox-text validatebox-text" style="width:80px">
					<option value="order_id">订单ID</option>
					<option value="order_sn">订单编号</option>
					<option value="member_id">下单人ID</option>
					<option value="customer_id">待客下单ID</option>
					<option value="consignee">收货人</option>
					<option value="consignee_phone">收货人手机号</option>
				</select></td>
				<td>&nbsp&nbsp;<input id="cfteamconsumeKeywords" style="width:120px" type="text"
									  class="easyui-input textbox"></td>
				<td><a href="javascript:void(0);" onclick="cfteamconsumeSearch();" class="l-btn l-btn-small l-btn-plain"><span
						class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span class="l-btn-text">查询</span></span></a>
				</td>
			</tr>
			</tbody>
		</table>
	</div>
	<div class="con"  style="-moz-user-select:none;">
		<table id="cfteamconsume"></table>
	</div>
	<div id="cfteamconsumeDlg" class="easyui-dialog" style="width:720px; height:520px;" title="信息框" closed="true"></div>
</div>
<script>
	var cfteamconsumeVm = new Vue({
		el: '#tb<?php echo $uniqid;?>',
		data: {
			params: {
				mode: 'included'
			}
		},
		methods: {
			filter(mode) {
				this.params.mode = mode;
				cfteamconsumeSearch();
			},
		}
	});
	var cfteamconsumeReload = function () {
		$("#cfteamconsume").datagrid('reload');
	};
	var cfteamconsumeSearch = function () {
		var height = 546 - $(".top").height() - 46;
		var width = $(window).width() - $(".leftmenu").width() - 8;
		$("#cfteamconsume").datagrid({
			width: width,
			height: height,//高度
			singleSelect: true,//如果为true，则只允许选择一行
			striped: true,//是否显示斑马线效果。
			rownumbers: true,//如果为true，则显示一个行号列。
			pagination: true,//是否显示分页
			pageSize: 10,
			pageList: [10, 15, 20, 25],
			method: 'post',
			sortName: 'id',
			sortOrder: 'desc',
			idField: 'id',
			treeField: 'title',
			url: '/admin/member/cfteamconsume',
			queryParams: {
				id: '<?php echo $id;?>',
				mode: cfteamconsumeVm.params.mode,
				keywordsType: $('#cfteamconsumeKeywordsType').val(),
				keywords: $('#cfteamconsumeKeywords').val(),
				start_on: $('#tb<?php echo $uniqid;?> #cfteamconsumeStartOn').val(),
				end_on: $('#tb<?php echo $uniqid;?> #cfteamconsumeEndOn').val(),
			},
			fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
			nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
			selectOnCheck: false,
			checkOnSelect: true,
			toolbar: '#tb<?php echo $uniqid;?>',
			showFooter: true,
			columns: [[
				{field: 'id', title: '订单ID', width: fixWidth(5)},
				{field:'order_sn',title:'订单编号',width:fixWidth(15)},
				{
					field: 'member',
					title: '下单用户',
					width: fixWidth(15),
					formatter: function (value, rowData, rowIndex) {
						return value ? '<div  style="line-height: 20px">ID:' + rowData.member.id + '<br>' +
								'昵称：' + (rowData.member.realname ? rowData.member.realname : rowData.member.nickname) + '<br>' +
								'电话：' + (rowData.member.phone ? rowData.member.phone : '') + '</div>' : '';
					}
				},
				{field:'consignee',title:'收货人',width:fixWidth(10),formatter: function (value, rowData, rowIndex) {
						return '<div  style="line-height: 20px">' + (rowData.consignee??'') + '<br>' +
								(rowData.phone??'') + '</div>';
					}},
				{field:'address',title:'收货地址',width:fixWidth(10),formatter: function (value, rowData, rowIndex) {
						return '<div  style="line-height: 20px">' + (rowData.province_name??'') + (rowData.city_name??'') + (rowData.area_name??'') + '<br>' +
								(rowData.address??'') + '</div>';
					}},
				{field:'status_name',title:'订单状态',width:fixWidth(10)},
				{field:'total_amount',title:'订单总金额',width:fixWidth(10)},
				{field:'total_fee',title:'支付金额',width:fixWidth(10)},
				{field:'discount_fee',title:'折扣总金额',width:fixWidth(10)},
				{field:'pay_type_text',title:'支付方式',width:fixWidth(10)},
				{field:'paytime',title:'支付时间',width:fixWidth(15), formatter(value, rowData){
						return value ? moment(value * 1000).format("Y-MM-DD HH:mm:ss") : '';
					}},
				{field:'memo',title:'商户备注',width:fixWidth(10)},
				{field:'remark',title:'用户备注',width:fixWidth(10)},
				{field:'created_at',title:'时间',width:fixWidth(15)},
			]]
		});
	};
	cfteamconsumeSearch();
</script>

<style>
	.datagrid-toolbar .selected {
		color: #f1f1f1;
		background: #1065a7;
		border: 1px solid #f0f0f0;
	}
</style>